<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box img {
            padding-top: 20px;
        }
    </style>
</head>

<body>
    <input type="button" value="1" onclick="show1(  )" id="btn1"   />
    <input type="button" value="2" onclick="show2(  )" id="btn2"  />
    <input type="button" value="3" onclick="show3(  )" id="btn3"  />
    <input type="button" value="4" onclick="show4(  )" id="btn4"  />
    <input type="button" value="上一张" onclick="show5(  )" />
    <input type="button" value="下一张" onclick="show6(  )" />
    <input type="button" value="放大" onclick="show7(  )" />
    <input type="button" value="缩小" onclick="show8(  )" />
    <input type="button" value="旋转" onclick="show9(  )" />
    <div class="box">
        <img width="140px" height="140px" src="images/1.jpg" id="pic" />
    </div>
    <script>
        function show2() {
            pic.src = "images/2.jpg";

            btn1.style.color = "";

            btn3.style.color = "";
            btn4.style.color = "";

            btn2.style.color = "red";
        }
        function show1() {
            pic.src = "images/1.jpg";
            btn2.style.color = "";
            btn3.style.color = "";
            btn4.style.color = "";

            btn1.style.color = "red";
        }

        function show3() {

            pic.src = "images/3.jpg";


            btn4.style.color = "";
            btn1.style.color = "";
            btn2.style.color = "";
            btn3.style.color = "red";

        }

        function show4() {

            pic.src = "images/4.jpg";

            btn3.style.color = "";
            btn1.style.color = "";
            btn2.style.color = "";
            btn4.style.color = "red";

        }
        var  i=1;
        function show5() {
            
            i=i-1;
            if (i<1) {
                pic.src = "images/4.jpg";
                i=4;
               

            } else {
           
                pic.src = "images/" + i + ".jpg";


            }
        }
        var  j=1;
        function  show6(){
          
            j=j+1;
            if(j>4){
                pic.src = "images/1.jpg";
                j=1;
            }else{
                pic.src="images/" + j + ".jpg";
            }
        }
        function  show7(){
            pic.width=pic.width+100;
        }

function  show8(){
            pic.width=pic.width-10;
        }
        function  show9(){
            pic.style.transform += 'rotate(90deg)';
        }
    </script>
</body>

</html>